<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-calendar-legend>
        <ui5-calendar-legend-item type="Type01" text="Type01"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type02" text="Type02"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type03" text="Type03"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type04" text="Type04"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type05" text="Type05"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type06" text="Type06"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type07" text="Type07"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type08" text="Type08"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type09" text="Type09"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type10" text="Type10"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type11" text="Type11"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type12" text="Type12"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type13" text="Type13"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type14" text="Type14"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type15" text="Type15"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type16" text="Type16"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type17" text="Type17"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type18" text="Type18"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type19" text="Type19"></ui5-calendar-legend-item>
        <ui5-calendar-legend-item type="Type20" text="Type20"></ui5-calendar-legend-item>
    </ui5-calendar-legend>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
